<template>
	<div class="base">
		<h1>vue基本语法</h1>
		<h2>1. 传参 基本用法</h2>
		<div>自定义组件 双向绑定:{{vmodelVal}}</div>
		<Headers
			ref="headerRef"
			v-model:keyword="vmodelVal"
			v-model:first-name="firstName"
			@call-val="callValFn"
		></Headers>
		<button @click="getChildFn">获取子组件headers的属性及方法</button>

		<h2>2. 事件 基本用法</h2>
		<p>{{msg}}</p>
		<br />
		<button @click="butFn">获取msg的值</button>
		<br />
		<button data-id="122" @click="eventFn($event)">事件对象</button>
		<br />
		<button data-id="122" @click="eventFns(123,$event)">多个事件对象</button>
		<button data-id="122" @click="one($event);two($event)">多个方法</button>

		<br />
		<input @keyup="keyupFn($event)" />
		<input v-on:keyup.delete="confirmDelete" value="按键修饰符" />
		<h2>3. 计算属性</h2>
		<div>{{username}}</div>
		<input v-model="letter" />
		<ul class="list">
			<li v-for="(el,index) in searchList" :key="index">{{el}}</li>
		</ul>
		<h3>小案例totolist</h3>
		<input v-model="course" @keyup.enter="confirmFn" />
		<div>
			<div>正在进行</div>
			<ul class="list">
				<li v-for="(item,index) in nowCourse" :key="index" @click="conductFn(item,index)">
					{{item}}
					<span @click.stop="del(index)">×</span>
				</li>
			</ul>
			<div>已经完成</div>
			<ul class="list">
				<li v-for="(el,index) in completeCourse" :key="index" @click="completeFn(el)">{{el}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
import storage from "../../src/utls/storage";
import Headers from "../components/headers.vue";
export default {
	data() {
		return {
			vmodelVal: "11",
			msg: "父组件",
			firstName: "刘",
			lastName: "小勇",
			letter: "",
			letterList: ["apper", "red", "oppo", "bannner", "head"],
			course: "",
			complete: [],
			nowCourse: [],
			completeCourse: []
		};
	},
	components: {
		Headers
	},
	computed: {
		username() {
			return this.firstName + this.lastName;
		},
		searchList() {
			let newList = [];
			this.letterList.forEach(el => {
				if (el.indexOf(this.letter) != -1) {
					newList.push(el);
				}
			});
			return newList;
		}
	},
	created() {
		storage.set("letterList", this.letterList);
		console.log(storage.get("letterList"));
	},
	methods: {
		//父组件主动获取子组件的数据，方法
		getChildFn() {
			console.log(this.$refs.headerRef.name, "ssss ddd");
			this.$refs.headerRef.getName();
		},
		// 子组件主动获取父组件的数据，方法
		fatherFn() {
			console.log("父组件的方法");
		},
		callValFn(item) {
			console.log("items:", item);
		},
		butFn() {
			console.log(this.msg);
		},
		eventFn(e) {
			//改变样式
			e.srcElement.style.background = "red";
			// 获取自定义属性的值
			console.log("获取自定义属性的值:", e.srcElement.dataset.id);
			//阻止默认事件
			e.preventDefault();
			//阻止冒泡
			e.stopPropagation();
		},
		eventFns(ev, e) {
			console.log("传入参数：", ev, e);
		},
		one(e) {
			console.log("one", e.srcElement.dataset.id);
		},
		two($event) {
			console.log("two:", $event);
		},
		keyupFn(e) {
			console.log(e.keyCode); //输入键盘
		},
		confirmDelete() {
			console.log("点击");
		},
		confirmFn() {
			let nowCourse = [];
			console.log("点击数");
			if (this.nowCourse.length == 0) {
				this.nowCourse.push(this.course);
				return false;
			}
			nowCourse = [].concat(this.nowCourse);
			let result = [];
			var isExist = false;
			for (var i = 0; i < nowCourse.length; i++) {
				if (nowCourse[i] == this.course) {
					isExist = true;
					break;
				}
			}
			if (!isExist) {
				result.push(this.course);
			}
			this.nowCourse = result.concat(this.nowCourse);
		},
		conductFn(row, index) {
			this.completeCourse.push(row);
			this.nowCourse.splice(index, 1);
		},
		del(index) {
			this.nowCourse.splice(index, 1);
		},
		completeFn(item, index) {
			this.nowCourse.push(item);
			this.completeCourse.splice(index, 1);
		}
	}
};
</script>

<style>
button {
	margin: 10px;
}
.list {
	margin-top: 10px;
	width: 300px;
	line-height: 35px;
	margin: auto;
}
.list li > span {
	background: #ccc;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
	display: inline-block;
	margin-left: 50px;
}
.base {
	margin-bottom: 50px;
}
</style>